<template>
  <div id="app">
    <el-card>
      <el-button type="primary" size="medium" @click="dialogVisible = true">添加店铺</el-button>
      <el-button type="primary" size="medium" @click="getListing">获取Listing</el-button>
      <el-button type="primary" size="medium" @click="exportExcel" disabled>导出数据</el-button>
    </el-card>
    <el-card>
      <el-tabs v-model="sellerId" type="card" closable @tab-remove="removeStore" @tab-click="changeTab">
        <el-tab-pane v-for="(item, index) in storeList" :key="index" :label="item" :name="item"></el-tab-pane>
      </el-tabs>
    </el-card>
    <el-card :body-style="{ margin: '10px' }">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="asin" label="ASIN"> </el-table-column>
        <el-table-column prop="image" label="主图">
          <template slot-scope="scope">
            <el-image style="width: 80px; height: 80px" :src="scope.row.image" fit="contain"></el-image>
          </template>
        </el-table-column>
        <el-table-column v-for="(v, i) in columns" :key="i" :prop="v.prop" :label="v.label" :width="v.width">
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :page-count="count" @current-change="changePage">
      </el-pagination>
    </el-card>

    <el-dialog title="添加店铺" :visible.sync="dialogVisible" width="300px" :before-close="handleClose">
      <el-input v-model="addSellerId" placeholder="请输入店铺ID"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSeller">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      loading: false,
      dialogVisible: false,
      addSellerId: "",
      sellerId: "",
      storeList: [],
      columns: [
        {
          label: "标题",
          prop: "title",
          width: '300px'
        },
        {
          label: "星级",
          prop: "rating",
        },
        {
          label: "评论",
          prop: "reviewCount",
        },
        {
          label: "价格",
          prop: "price",
        },
        {
          label: "库存",
          prop: "availability",
        },
        {
          label: "型号",
          prop: "itemModelNumber",
        },
        {
          label: "零件号",
          prop: "manufacturerPartNumber",
        },
      ],
      tableData: [],
      count: 0
    };
  },
  created() {
    this.getAllStore();
  },
  methods: {
    changePage(page) {
      this.getTableList(page)
    },
    changeTab(target) {
      this.sellerId = target.name;
      this.getTableList(1)
    },
    getAllStore() {
      this.loading = true;
      this.$axios({
        method: "get",
        url: "http://localhost:3000/api/allStore"
      })
        .then((res) => {
          this.loading = false;
          if (res.data.code === "200") {
            this.storeList = res.data.data || [];
            this.sellerId = this.storeList[0] || '';
            // this.$nextTick()
            this.getTableList();
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    getTableList(pageNum = 1) {
      this.loading = true;
      this.$axios({
        method: "get",
        url: "http://localhost:3000/api/getStoreASIN",
        params: {
          sellerId: this.sellerId,
          pageNum: pageNum,
        },
      })
        .then((res) => {
          this.loading = false;
          console.log(res);
          if (res.data.code === "200") {
            this.tableData = res.data.data.list || [];
            this.count = res.data.data.count || 0;
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    addSeller() {
      this.$confirm("是否抓取该店铺ASIN, 预计需要等待5-10分钟?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: "http://localhost:3000/api/crawlerStoreASIN",
            params: {
              sellerId: this.addSellerId,
            },
          })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message("创建成功，等待程序抓取");
                this.dialogVisible = false;
                this.getAllStore();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });
    },
    getListing() {
      
      this.$confirm(`是否抓取该店铺Listing详情, 预计需要${Math.ceil((this.count +1 ) * 20 * 4 / 60)}分钟？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: "http://localhost:3000/api/crawlerStoreListing",
            params: {
              sellerId: this.sellerId,
            },
          })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message("创建成功，等待程序抓取");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });
    },

    exportExcel() {
      this.$confirm("是否导出全部数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: "http://localhost:3000/api/exportData",
            params: {
              sellerId: this.sellerId,
            },
          })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message("创建成功，等待程序抓取");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });
    },
    removeStore(target) {
      this.$confirm("是否删除该店铺数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "get",
            url: "http://localhost:3000/api/delStore",
            params: {
              sellerId: target,
            },
          })
            .then((res) => {
              if (res.data.code === "200") {
                this.$message("删除成功");
                this.getAllStore();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => { });

     
      
      
    }
  },
};
</script>

<style>
body {
  margin: 0px;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  background: #f2f2f2;
  min-height: 100vh;
}
</style>
